<template>
  <div>
    <template v-for="item in permissionList">
      <el-checkbox :label="item.id" :key="item.id" :style="indent" :value="item.id">{{ item.name }}</el-checkbox>
      <template v-if="item._child">
        <tree ref="tree" :permission-list="item._child" :key="depth+'_'+item.id" :depth="depth + 1"/>
      </template>
    </template>
  </div>

</template>

<script>
export default {
  name: 'Tree',
  components: {},
  props: {
    permissionList: {
      type: Array,
      default: function() {
        return []
      },
      required: false
    },
    depth: {
      type: Number,
      default: 0,
      required: false
    }
  },
  data() {
    return {

    }
  },

  computed: {
    indent() {
      return { transform: `translate(${this.depth * 20}px)` }
    }
  }

}
</script>
